<template>
    <div class="popular">
        <div class="title">
            <h2 class="h2">热门目的地</h2>
        </div>
        <div class="a border-top">


            <div class="popularlist">
                <div class="li" v-for="(item, index) in popularlist" :key="index" :class="{ active: value === index }"
                    @click.prevent="selectMenuAction(index, item.id, item.img1, item.img2, item.disabled1)">

                    {{ item.id }}
                </div>


            </div>


            <transition mode="out-in">

                <div class="content" v-if="value == 0">
                    <div class="left" @click="toAction(id1)">
                        <img :src="leftimg" alt="">
                        <p>整套公寓-3张床</p>
                        <p>¥1200/晚</p>
                        <van-rate v-model="num2" readonly />{{ num2 }}.0
                        <i class="iconfont ico icon-daohangshoucangyishoucang" :class="{active: collectlist.filter(
                            (item22) => item22.hotelId === id1
                        ).length > 0,}" @click.stop="btnAction(id1, collectlist),btn2Action()"></i>
                    </div>
                    <div class="right" @click="toAction(id2)">
                        <img  :src="rightimg" alt="">
                        <p>整套公寓-3张床</p>
                        <p>¥1200/晚</p>
                        <van-rate v-model="num2" readonly />{{ num2 }}.0
                        <i class="iconfont ico icon-daohangshoucangyishoucang" :class="{
                            active: collectlist.filter(
                                (item22) => item22.hotelId === id2
    ).length > 0,}" @click.stop="btnAction(id2, collectlist)"></i>


                    </div>

                </div>
            </transition>

            <transition mode="out-in">
                <div class="content" v-if="value == 1">
                    <div class="left" @click="toAction(htl[2]._id)">
                        <img :src="htl[2].picUrl" alt="">
                        <p>整套公寓-3张床</p>
                        <p>¥1200/晚</p>
                        <van-rate v-model="num1" readonly />{{ num1 }}.0
                        <i class="iconfont ico icon-daohangshoucangyishoucang" :class="{
                            active: collectlist.filter(
                                (item22) => item22.hotelId === htl[2]._id
    ).length > 0,}" @click.stop="btnAction(htl[2]._id, collectlist)"></i>


                    </div>
                    <div class="right" @click="toAction(htl[3]._id)">
                        <img :src="htl[3].picUrl" alt="">
                        <p>整套公寓-1张床</p>
                        <p>¥700/晚</p>
                        <van-rate v-model="num1" readonly />{{ num1 }}.0
                        <i class="iconfont ico icon-daohangshoucangyishoucang" :class="{
                            active: collectlist.filter(
                                (item22) => item22.hotelId === htl[3]._id
    ).length > 0,}" @click.stop="btnAction(htl[3]._id, collectlist)"></i>


                    </div>
                </div>
            </transition>

            <transition mode="out-in">
                <div class="content" v-if="value == 2">
                    <div class="left" @click="toAction(htl[4]._id)">
                        <img :src="htl[4].picUrl" alt="">
                        <p>整套公寓-3张床</p>
                        <p>¥1200/晚</p>
                        <van-rate v-model="num1" readonly />{{ num1 }}.0
                        <i class="iconfont ico icon-daohangshoucangyishoucang" :class="{
                            active: collectlist.filter(
                                (item22) => item22.hotelId === htl[4]._id
    ).length > 0,}" @click.stop="btnAction(htl[4]._id, collectlist)"></i>


                    </div>
                    <div class="right" @click="toAction(htl[5]._id)">
                        <img :src="htl[5].picUrl" alt="">
                        <p>整套公寓-1张床</p>
                        <p>¥790/晚</p>
                        <van-rate v-model="num1" readonly />{{ num1 }}.0
                        <i class="iconfont ico icon-daohangshoucangyishoucang" :class="{
                            active: collectlist.filter(
                                (item22) => item22.hotelId === htl[5]._id
    ).length > 0,}" @click.stop="btnAction(htl[5]._id, collectlist)"></i>


                    </div>
                </div>
            </transition>


            <transition mode="out-in">
                <div class="content" v-if="value == 3">
                    <div class="left" @click="toAction(htl[6]._id)">
                        <img :src="htl[6].picUrl" alt="">
                        <p>整套公寓-3张床</p>
                        <p>¥1200/晚</p>
                        <van-rate v-model="num2" readonly />{{ num2 }}.0
                        <i class="iconfont ico icon-daohangshoucangyishoucang" :class="{
                            active: collectlist.filter(
                                (item22) => item22.hotelId === htl[6]._id
    ).length > 0,}" @click.stop="btnAction(htl[6]._id, collectlist)"></i>


                    </div>
                    <div class="right" @click="toAction(htl[7]._id)">
                        <img :src="htl[7].picUrl" alt="">
                        <p>整套公寓-3张床</p>
                        <p>¥1200/晚</p>
                        <van-rate v-model="num2" readonly />{{ num2 }}.0
                        <i class="iconfont ico icon-daohangshoucangyishoucang" :class="{
                            active: collectlist.filter(
                                (item22) => item22.hotelId === htl[7]._id
    ).length > 0,}" @click.stop="btnAction(htl[7]._id, collectlist)"></i>


                    </div>
                </div>
            </transition>


            <transition mode="out-in">
                <div class="content" v-if="value == 4">
                    <div class="left" @click="toAction(htl[8]._id)">
                        <img :src="htl[8].picUrl" alt="">
                        <p>整套公寓-3张床</p>
                        <p>¥1200/晚</p>
                        <van-rate v-model="num2" readonly />{{ num2 }}.0
                        <i class="iconfont ico icon-daohangshoucangyishoucang" :class="{
                            active: collectlist.filter(
                                (item22) => item22.hotelId === htl[8]._id
    ).length > 0,}"  @click.stop="btnAction(htl[8]._id, collectlist)"></i>
    
                    </div>
                    <div class="right" @click="toAction(htl[9]._id)">
                        <img :src="htl[9].picUrl" alt="">
                        <p>整套公寓-3张床</p>
                        <p>¥1200/晚</p>
                        <van-rate v-model="num2" readonly />{{ num2 }}.0
                        <i class="iconfont ico icon-daohangshoucangyishoucang" :class="{
                            active: collectlist.filter(
                                (item22) => item22.hotelId === htl[9]._id
    ).length > 0,}" @click.stop="btnAction(htl[9]._id, collectlist)"></i>
                    </div>
                </div>
            </transition>
        </div>

    </div>
</template>

<script>

import { Rate, Toast } from 'vant';
import { collectApi, cxcollectApi, deletecollectApi, collectListApi1 } from "../../../api/collect"
import { hotelApi } from "../../../api/hotel"

export default {
    name: 'popular',
    components: {
        [Rate.name]: Rate,

    },
    props: {
        value: Number
    },
    data() {
        return {
            popularlist: [
                {
                    id: "珠海",

                },
                {
                    id: "吉隆坡",
                    

                },
                {
                    id: "海南",

                },
                {
                    id: "成都",

                },
                {
                    id: "济州岛",
                }
            ],
            htl: [],
            id1: '',
id2:'',
            
            collectlist: [],
            disabled1: false,
            leftimg: '',
                rightimg:'',
            num: 0,
            num: 0,
            num1: 4,
            num2: 5,
            activeondex: 0,
            name: '珠海',

        }
    },

    created() {
    // console.log(this.collectlist);
        this.collectcx()
        this.hotellist()


    // console.log(1);
    },
//     watch: {
//         collectlist() {
//         console.log(12345);
//     }
// },

    methods: {
        async hotellist() {
            const dd = await hotelApi();
            // console.log(dd);
            this.leftimg = dd.data[0].picUrl;
            this.rightimg = dd.data[1].picUrl;
            this.id1 = dd.data[0]._id;
            this.id2 = dd.data[1]._id;

            this.htl = dd.data;
            // console.log(this.htl);

        },
        // 点击切换菜单
        btn2Action() {
            // this.$nextTick(
            //     () => {
            //         this.collectcx()
            //     }
            // );
        },
        async collectcx() {
            const a = await collectListApi1()
            this.collectlist = a.data.list
            console.log(this.collectlist);
        },
        selectMenuAction(index, id, img1, img2) {
            // 修改选中菜单的样式
            this.$emit('input', index);
            // console.log(img1, img2);
            this.name = id;
            this.img1 = img1;
            this.img2 = img2
        },
         toAction(id) {

            this.$router.push({
                name: `detail`,
                params: { id },
            });
        },
        async btnAction(id,list) {
            // console.log(id);
            const res = await cxcollectApi({ hotelId: id })
            // console.log(res.data);
            if (res.data) {
                 await deletecollectApi({ hotelId: id });

                // this.collectlist.splice(this.collectlist.length-1,1)
                // console.log(aa);
                const aa= this.collectlist.filter((item) => {
                    item.id===id
                })
 
 Toast("取消收藏成功")
                this.collectcx()
                // this.$forceUpdate();
                // window.location
                // window.location.reload();
            }
            else {
                const aa = await collectApi({ hotelId: id })
                console.log(aa.data.data);
                Toast("收藏成功")
                this.collectlist.push(aa.data.data)
                // this.$forceUpdate();
                // window.location.reload();


            }
        },
    }
}
</script>

<style lang="scss" scoped>
@function vw($px) {
    @return ($px / 750) * 100vw;

}

.collect {
    position: absolute;
    top: vw(50);
    left: vw(240);
    z-index: 2;
}


p {
    margin-top: vw(10);
}

.left {
    position: relative;
}

.right {
    margin-top: vw(10);
}

.left {
    position: relative;
}

.right {
    position: relative;
}

.ico {
    color: #fff;
    position: absolute;
    top: vw(10);
    right: vw(10);
}


.ico {
    color: #fff;
    position: absolute;
    top: vw(10);
    right: vw(10);
}

.ico.active {
    color: red;

}

.van-rate {
    position: relative;


}

span {
    position: absolute;
    bottom: 0;
    right: vw(40);
}

i {
    font-size: vw(40);
}

i {
    font-size: vw(40);
}

.popular {
    background-color: rgb(237, 241, 241);



    .content {
        height: vw(370);
        display: flex;
        align-items: center;
        padding: vw(30) 0;
        justify-content: space-around;


        .van-icon-like {
            position: absolute;
            top: 0;
            left: vw(100);
        }

        padding: vw(30) 0;
        justify-content: space-around;


        .van-icon-like {
            position: absolute;
            top: 0;
            left: vw(100);
        }

        // flex-direction: column;
        img {
            width: vw(300);
            height: vw(230);
            position: relative;
            // left: vw(40);
            // left: vw(40);
        }
    }

    .title {
        padding-top: vw(20);
        padding-left: vw(10);


    }

    h2 {
        font-weight: bold;
        font-size: vw(40);

    }

    .popularlist {
        display: flex;
        // padding-top:vw(400) ;
        height: vw(90);
        // margin-top: vw(10);
        // padding-top:vw(400) ;
        height: vw(90);
        // margin-top: vw(10);

        //         border-top:1px solid #ccc;
        // border-bottom: 1px solid #ccc;
        .li {
            width: 20%;
            height: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            position: relative;
            align-items: center;
            color: #000;
            // height: vw(90);
            // height: vw(90);
            background-color: #fff;

            &.active::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 4px;
                background: blue;
                bottom: 0px;
                left: 50%;
                transform: translateX(-50%);
            }
        }

    }
}

.pf {
    display: flex;
}

.pf {
    display: flex;
}

.a {
    border-bottom: 1px solid #ccc;
}

@keyframes fadeIn {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes fadeOn {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.v-enter-active {
    animation: 0.5s fadeIn;
}

.v-leave-active {
    animation: 0s fadeon;

}
</style>
